<template>
    <div>
        <div class="page-title">HSE问题录入</div>
        <div class="page-content">
            <el-form 
            v-model="filterQuery" 
            inline>
                <el-form-item label="年限">
                    <el-date-picker
                    placeholder="请输入年限"
                    v-model="filterQuery.year"
                    type="year"
                    clearable
                    style="width: 180px"></el-date-picker>
                </el-form-item>
                <el-form-item label="轮次">
                    <el-input 
                    placeholder="请输入轮次"
                    v-model="filterQuery.round" 
                    style="width: 160px"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="width: 100px" @click="handleSearch">查 询</el-button>
                </el-form-item>
            </el-form>

            <el-table
            :data="tableData"
            :header-cell-style="{'text-align': 'center'}"
            :cell-style="{'text-align': 'center'}"
            height="500px"
            style="width: 100%"
            border>
                <el-table-column
                label="序号"
                type="index">
                </el-table-column>
                <el-table-column
                label="时间"
                prop="groupYear">
                </el-table-column>
                <el-table-column
                label="轮次"
                prop="round">
                </el-table-column>
                <el-table-column
                label="任务名"
                prop="taskName">
                </el-table-column>
                <el-table-column
                label="审核组"
                prop="auditGroupName">
                </el-table-column>
                <el-table-column
                label="审核区域"
                prop="companyName"
                :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column
                label="任务状态"
                prop="status">
                </el-table-column>
                <el-table-column
                label="操作">
                <template slot-scope="scope">
                <el-button v-if="scope.row.status == '进行中'" type="primary" @click="handleTask(scope.row)" size="mini">执行任务</el-button>
                <el-button v-else type="danger" @click="handleTask" size="mini" disabled>任务已到期</el-button>
                </template>
                </el-table-column>
            </el-table>
            <div class="pagination-base">
                <el-pagination
                background
                layout="total, prev, pager, next"
                @current-change="handlePageChange"
                :page-size="10"
                :total="pageTotal"></el-pagination>
            </div>
        </div>

    </div>
</template>

<script>
import { GetHseAuditTask
         } from '../../../services/hseAudit'

export default {
    data() {
        return {
            filterQuery: {
                year: '',
                round: '',
                staffID: '',
            },
            tableData:[],
            pageTotal: null
        }
    },
    mounted() {
        this.handleSearch()
    },
    methods: {
        handleSearch() {
            GetHseAuditTask(this.filterQuery).then(res => {
                this.tableData = res.data.slice(0,10)
                this.pageTotal = res.data.length
            })
        },
        handleTask(row) {
            row = JSON.stringify(row)
            this.$router.push(
                {
                    path: '/hseAudit/hseProblemEntry/sceneCheck',
                    query: {row}
                })
        },
        handlePageChange(val) {
            GetHseAuditTask(this.filterQuery).then(res => {
                var pageStart = (val-1) * 10
                var pageEnd= val * 10
                this.tableData = res.data.slice(pageStart,pageEnd)
                this.pageTotal = res.data.length
            })
        }
    }
}
</script>

<style>
.el-table th {
    display: table-cell ! important;
}
</style>